<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>财务管理</title>
    <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="../../static/kj/vue.min.js"></script>
    <script src="../../static/kj/element-ui/index.js"></script>
    <script src="../../static/sa.js"></script>
</head>
<body>
    <div id="app">
        <div class="c-panel f-main">
            <div class="c-title">财务管理</div>
            
            <!-- 财务概览 -->
            <div class="financial-overview">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card class="overview-card revenue">
                            <div class="overview-item">
                                <div class="overview-number">{{ financialStats.monthlyRevenue }}</div>
                                <div class="overview-label">本月营收(万)</div>
                                <div class="overview-change positive">+12.5%</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card expense">
                            <div class="overview-item">
                                <div class="overview-number">{{ financialStats.monthlyExpense }}</div>
                                <div class="overview-label">本月支出(万)</div>
                                <div class="overview-change negative">+8.3%</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card profit">
                            <div class="overview-item">
                                <div class="overview-number">{{ financialStats.monthlyProfit }}</div>
                                <div class="overview-label">本月利润(万)</div>
                                <div class="overview-change positive">+18.2%</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card pending">
                            <div class="overview-item">
                                <div class="overview-number">{{ financialStats.pendingAmount }}</div>
                                <div class="overview-label">待收款(万)</div>
                                <div class="overview-change neutral">-3.1%</div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <!-- 功能选项卡 -->
            <el-tabs v-model="activeTab">
                <el-tab-pane label="收支明细" name="income-expense">
                    <div class="financial-section">
                        <div class="query-tools">
                            <el-row :gutter="15">
                                <el-col :span="6">
                                    <el-select v-model="financeQuery.type" placeholder="收支类型" clearable>
                                        <el-option label="收入" value="income"></el-option>
                                        <el-option label="支出" value="expense"></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="6">
                                    <el-select v-model="financeQuery.category" placeholder="分类" clearable>
                                        <el-option label="运输收入" value="transport"></el-option>
                                        <el-option label="仓储收入" value="warehouse"></el-option>
                                        <el-option label="燃油费用" value="fuel"></el-option>
                                        <el-option label="人工成本" value="labor"></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="6">
                                    <el-date-picker
                                        v-model="financeQuery.dateRange"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span="6">
                                    <el-button type="primary" @click="searchFinanceRecords">查询</el-button>
                                    <el-button @click="resetFinanceQuery">重置</el-button>
                                    <el-button type="success" @click="addFinanceRecord">记账</el-button>
                                </el-col>
                            </el-row>
                        </div>

                        <el-table :data="financeData" border style="width: 100%; margin-top: 20px;" :summary-method="getFinanceSummaries" show-summary>
                            <el-table-column prop="date" label="日期" width="120"></el-table-column>
                            <el-table-column prop="type" label="类型" width="80">
                                <template slot-scope="scope">
                                    <el-tag :type="scope.row.type === '收入' ? 'success' : 'warning'">
                                        {{ scope.row.type }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="category" label="分类" width="120"></el-table-column>
                            <el-table-column prop="description" label="描述" width="200"></el-table-column>
                            <el-table-column prop="amount" label="金额(元)" width="120">
                                <template slot-scope="scope">
                                    <span :style="{color: scope.row.type === '收入' ? '#67C23A' : '#E6A23C', fontWeight: 'bold'}">
                                        {{ scope.row.type === '收入' ? '+' : '-' }}{{ scope.row.amount }}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="account" label="账户" width="150"></el-table-column>
                            <el-table-column prop="operator" label="操作人" width="100"></el-table-column>
                            <el-table-column label="操作" width="150">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="viewFinanceDetail(scope.row)">详情</el-button>
                                    <el-button size="mini" type="primary" @click="editFinanceRecord(scope.row)">编辑</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="结算对账" name="settlement">
                    <div class="settlement-section">
                        <div class="settlement-tools">
                            <el-button type="primary" @click="createSettlement">新建结算单</el-button>
                            <el-button type="success" @click="batchSettlement">批量结算</el-button>
                            <el-button @click="exportSettlement">导出对账单</el-button>
                        </div>

                        <el-table :data="settlementData" border style="width: 100%; margin-top: 20px;">
                            <el-table-column prop="settlementNo" label="结算单号" width="140"></el-table-column>
                            <el-table-column prop="customer" label="客户名称" width="150"></el-table-column>
                            <el-table-column prop="period" label="结算周期" width="120"></el-table-column>
                            <el-table-column prop="orderCount" label="订单数量" width="100"></el-table-column>
                            <el-table-column prop="totalAmount" label="结算金额(元)" width="150">
                                <template slot-scope="scope">
                                    <span style="color: #67C23A; font-weight: bold">{{ scope.row.totalAmount }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="paidAmount" label="已付金额(元)" width="150">
                                <template slot-scope="scope">
                                    <span style="color: #409EFF">{{ scope.row.paidAmount }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="unpaidAmount" label="未付金额(元)" width="150">
                                <template slot-scope="scope">
                                    <span :style="{color: scope.row.unpaidAmount > 0 ? '#F56C6C' : '#67C23A'}">
                                        {{ scope.row.unpaidAmount }}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="status" label="状态" width="100">
                                <template slot-scope="scope">
                                    <el-tag :type="getSettlementStatusType(scope.row.status)">
                                        {{ scope.row.status }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="200">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="viewSettlementDetail(scope.row)">详情</el-button>
                                    <el-button size="mini" type="primary" @click="confirmPayment(scope.row)" v-if="scope.row.status === '待付款'">确认付款</el-button>
                                    <el-button size="mini" type="success" @click="printSettlement(scope.row)">打印</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="发票管理" name="invoice">
                    <div class="invoice-section">
                        <div class="invoice-tools">
                            <el-button type="primary" @click="createInvoice">开具发票</el-button>
                            <el-button type="warning" @click="applyInvoice">申请发票</el-button>
                            <el-button @click="exportInvoiceList">导出清单</el-button>
                        </div>

                        <el-table :data="invoiceData" border style="width: 100%; margin-top: 20px;">
                            <el-table-column prop="invoiceNo" label="发票号码" width="150"></el-table-column>
                            <el-table-column prop="invoiceType" label="发票类型" width="120">
                                <template slot-scope="scope">
                                    <el-tag :type="getInvoiceTypeColor(scope.row.invoiceType)">
                                        {{ scope.row.invoiceType }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="customer" label="客户名称" width="180"></el-table-column>
                            <el-table-column prop="amount" label="发票金额(元)" width="150">
                                <template slot-scope="scope">
                                    <span style="color: #67C23A; font-weight: bold">{{ scope.row.amount }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="taxRate" label="税率" width="80">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.taxRate }}%</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="issueDate" label="开票日期" width="120"></el-table-column>
                            <el-table-column prop="status" label="状态" width="100">
                                <template slot-scope="scope">
                                    <el-tag :type="getInvoiceStatusType(scope.row.status)">
                                        {{ scope.row.status }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="200">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="viewInvoiceDetail(scope.row)">详情</el-button>
                                    <el-button size="mini" type="primary" @click="downloadInvoice(scope.row)">下载</el-button>
                                    <el-button size="mini" type="danger" @click="voidInvoice(scope.row)" v-if="scope.row.status === '已开具'">作废</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    activeTab: 'income-expense',
                    financialStats: {
                        monthlyRevenue: 458.6,
                        monthlyExpense: 312.4,
                        monthlyProfit: 146.2,
                        pendingAmount: 89.5
                    },
                    financeQuery: {
                        type: '',
                        category: '',
                        dateRange: []
                    },
                    financeData: [
                        {
                            date: '2024-01-16',
                            type: '收入',
                            category: '运输收入',
                            description: '北京-上海冷链运输费',
                            amount: 12500,
                            account: '中国银行基本账户',
                            operator: '张三'
                        },
                        {
                            date: '2024-01-16',
                            type: '支出',
                            category: '燃油费用',
                            description: '车辆加油费用',
                            amount: 1800,
                            account: '中国银行基本账户',
                            operator: '李四'
                        },
                        {
                            date: '2024-01-15',
                            type: '收入',
                            category: '仓储收入',
                            description: '冷库仓储服务费',
                            amount: 8900,
                            account: '工商银行账户',
                            operator: '王五'
                        }
                    ],
                    settlementData: [
                        {
                            settlementNo: 'ST202401001',
                            customer: '北京华联超市',
                            period: '2024-01',
                            orderCount: 25,
                            totalAmount: 156800,
                            paidAmount: 120000,
                            unpaidAmount: 36800,
                            status: '部分付款'
                        },
                        {
                            settlementNo: 'ST202401002',
                            customer: '上海家乐福',
                            period: '2024-01',
                            orderCount: 18,
                            totalAmount: 98500,
                            paidAmount: 0,
                            unpaidAmount: 98500,
                            status: '待付款'
                        }
                    ],
                    invoiceData: [
                        {
                            invoiceNo: 'INV20240116001',
                            invoiceType: '增值税专用发票',
                            customer: '北京华联超市',
                            amount: 120000,
                            taxRate: 13,
                            issueDate: '2024-01-16',
                            status: '已开具'
                        },
                        {
                            invoiceNo: 'INV20240115001',
                            invoiceType: '增值税普通发票',
                            customer: '个人客户',
                            amount: 5600,
                            taxRate: 13,
                            issueDate: '2024-01-15',
                            status: '已开具'
                        }
                    ]
                }
            },
            methods: {
                getSettlementStatusType(status) {
                    const typeMap = {
                        '待付款': 'warning',
                        '部分付款': 'primary',
                        '已付款': 'success',
                        '逾期': 'danger'
                    };
                    return typeMap[status] || 'info';
                },
                getInvoiceTypeColor(type) {
                    const typeMap = {
                        '增值税专用发票': 'primary',
                        '增值税普通发票': 'success',
                        '电子发票': 'info'
                    };
                    return typeMap[type] || 'info';
                },
                getInvoiceStatusType(status) {
                    const typeMap = {
                        '草稿': 'info',
                        '已开具': 'success',
                        '已作废': 'danger',
                        '已红冲': 'warning'
                    };
                    return typeMap[status] || 'info';
                },
                searchFinanceRecords() {
                    this.$message.success('查询完成');
                },
                resetFinanceQuery() {
                    this.financeQuery = { type: '', category: '', dateRange: [] };
                },
                addFinanceRecord() {
                    this.$message.info('记账功能开发中');
                },
                viewFinanceDetail(row) {
                    this.$message.info('查看财务详情功能开发中');
                },
                editFinanceRecord(row) {
                    this.$message.info('编辑财务记录功能开发中');
                },
                createSettlement() {
                    this.$message.info('新建结算单功能开发中');
                },
                batchSettlement() {
                    this.$message.info('批量结算功能开发中');
                },
                exportSettlement() {
                    this.$message.success('对账单导出成功');
                },
                viewSettlementDetail(row) {
                    this.$message.info('查看结算详情功能开发中');
                },
                confirmPayment(row) {
                    this.$confirm('确认收到付款？', '付款确认').then(() => {
                        row.status = '已付款';
                        row.paidAmount = row.totalAmount;
                        row.unpaidAmount = 0;
                        this.$message.success('付款确认成功');
                    });
                },
                printSettlement(row) {
                    this.$message.success('结算单打印成功');
                },
                createInvoice() {
                    this.$message.info('开具发票功能开发中');
                },
                applyInvoice() {
                    this.$message.info('申请发票功能开发中');
                },
                exportInvoiceList() {
                    this.$message.success('发票清单导出成功');
                },
                viewInvoiceDetail(row) {
                    this.$message.info('查看发票详情功能开发中');
                },
                downloadInvoice(row) {
                    this.$message.success('发票下载成功');
                },
                voidInvoice(row) {
                    this.$confirm('确认作废发票？', '作废确认').then(() => {
                        row.status = '已作废';
                        this.$message.warning('发票已作废');
                    });
                },
                getFinanceSummaries(param) {
                    const { columns, data } = param;
                    const sums = [];
                    columns.forEach((column, index) => {
                        if (index === 0) {
                            sums[index] = '合计';
                            return;
                        }
                        if (column.property === 'amount') {
                            let income = 0;
                            let expense = 0;
                            data.forEach(item => {
                                if (item.type === '收入') {
                                    income += Number(item.amount);
                                } else {
                                    expense += Number(item.amount);
                                }
                            });
                            sums[index] = `收入: ${income} | 支出: ${expense} | 净额: ${income - expense}`;
                        } else {
                            sums[index] = '';
                        }
                    });
                    return sums;
                }
            }
        });
    </script>

    <style scoped>
        .financial-overview {
            margin-bottom: 30px;
        }
        
        .overview-card {
            text-align: center;
            transition: all 0.3s;
        }
        
        .overview-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .overview-card.revenue {
            border-left: 4px solid #67C23A;
        }
        
        .overview-card.expense {
            border-left: 4px solid #E6A23C;
        }
        
        .overview-card.profit {
            border-left: 4px solid #409EFF;
        }
        
        .overview-card.pending {
            border-left: 4px solid #F56C6C;
        }
        
        .overview-number {
            font-size: 28px;
            font-weight: bold;
            color: #303133;
        }
        
        .overview-label {
            color: #606266;
            margin: 8px 0;
        }
        
        .overview-change {
            font-size: 12px;
            font-weight: bold;
        }
        
        .overview-change.positive {
            color: #67C23A;
        }
        
        .overview-change.negative {
            color: #F56C6C;
        }
        
        .overview-change.neutral {
            color: #909399;
        }
        
        .financial-section, .settlement-section, .invoice-section {
            margin-bottom: 20px;
        }
        
        .query-tools, .settlement-tools, .invoice-tools {
            margin-bottom: 20px;
        }
        
        .settlement-tools .el-button, .invoice-tools .el-button {
            margin-right: 10px;
        }
    </style>
</body>
</html>